<!--
 * @Author: 刘苗
 * @Description: 表格配置
 * @Date: 2021-08-24 15:53:43
-->
<template>
  <div class="app-container">
    <baseTable
      ref="baseTable"
      :tableOptions="tableOptions"
      @handleTableBtn="handleTableBtn"
    >
      <template #default>
        <el-button type="primary" size="default">导入</el-button>
        <el-button type="primary" size="default">新建</el-button>
        <el-button type="danger" size="default" @click="handleDel"
          >批量删除</el-button
        >
      </template>
    </baseTable>
  </div>
</template>

<script>
import { tabelecolum } from "@/utils/tableCloum.js"; //存放所欲表格配置
import { renderTableHeader } from "@/utils";
export default {
  data() {
    return {
      filterMore: false,
      tableOptions: {
        // 查询表单label-width
        labelWidth: "110px",
        // 查询表固定参数
        fixeParams: {},
        // 表格接口
        apiFn: this.$getWZlIST,
        // 单选开启
        radioSelect: true,
        // 多选开启
        selection: true,
        // 表格配置
        cols: [
          {
            props: "articleTitle", //字段
            align: "center", //对齐方式
            minWidth: 300, //宽度
            fixed: "left",
            showInTable: true, //是否在表格显示
            showInSerach: true, //在过滤查询显示
            valueType: "input", //表单类型
            defaultValue: 111, //默认值
            searTitle: "普通输入框", //lable
            disabled: true,
            // 自定义属性
            rules: [
              // { required: true, message: "必填项", trigger: "blur" }
            ],
            prop: {
              style: {
                width: "220px",
              },
              placeholder: "请输入",
            },
            render: (h, { column }) => {
              return renderTableHeader(h, { column }, "带提示得表头文案");
            },
            // 这里使用函数得原因是考虑到以后可能会加入国际化
            label: "标题",
          },

          {
            props: "articleTypeId",
            label: "文章类型id",
            minWidth: 100,
            showInTable: true,
            showInSerach: true,
            align: "left",
            valueType: "select",
            searTitle: "固定数据源",
            defaultValue: 1, //默认值
            rules: [],
            prop: {
              style: {
                width: "320px",
              },
              placeholder: "请输入",
            },
            sourceData: [
              {
                label: "类型一",
                value: 1,
              },
              {
                label: "类型二",
                value: 2,
              },
            ],
          },
          {
            props: "articleMarket",
            minWidth: 200,
            showInTable: true,
            label: "市场类型",
            showInSerach: true,
            valueType: "select",
            searTitle: "接口数据源",
            sourceData: [],
          },
          {
            props: "wd",
            label: "关键字",
            minWidth: 200,
            showInTable: false,
            showInSerach: true,
            searTitle: "关键字",
            valueType: "input",
            prop: {
              style: {
                width: "220px",
              },
            },
          },
          {
            props: "createDate",
            minWidth: 200,
            label: "时间",
            showInSerach: true,
            showInTable: true,
            valueType: "datetime",
            searTitle: "时间选择",
            datetimerange: ["sartTime", "endTime"],
          },
          {
            props: "inventedReadNum",
            minWidth: 100,
            sortable: true,
            showInTable: true,
            showInSerach: true,
            searTitle: "阅读数",
            label: "阅读数",
            valueType: "inputNumber",
          },
          {
            props: "followstatus",
            minWidth: 100,
            sortable: true,
            showInTable: true,
            label: "粉丝数",
          },
          {
            props: "commentCount",
            minWidth: 100,
            sortable: true,
            showInTable: true,
            label: "评论数",
          },
          {
            props: "abstracts",
            minWidth: 200,
            width: 300,
            showTool: true,
            showInTable: true,
            label: "描述",
          },

          {
            props: "spcolumnName",
            minWidth: 200,
            showInTable: true,
            label: "专栏名",
          },
          {
            props: "spcolumnId",
            minWidth: 200,
            showInTable: true,
            label: "专栏id",
          },
          {
            props: "updateDate",
            minWidth: 200,
            showInTable: true,
            label: "更新时间",
          },
          {
            props: "",
            minWidth: 200,
            showInTable: true,
          },
          {
            props: "headUrl",
            fixed: "right",
            html: true,
            compName: "tableIMg",
            showInTable: true,
            width: 150,
            label: "头像-自定义组件",
          },
        ],
        // 操作列右边固定
        tableFixed: "right",
        // 操作列对齐方式
        handleAlign: "center",
        // 操作配置
        finalColWidth: 100,
        handle: [
          {
            btntxt: "编辑",
            txt: "编辑",
            handleName: "handleEdit",
          },
          {
            btntxt: "删除",
            txt: "删除",
            handleName: "handleEdit",
          },
        ],
      },
      form: {
        title: "22222222222",
        marketId: "001",
        timer: [],
        startTime: "",
        endTime: "",
      },
      list: [],
    };
  },
  mounted() {
    this.$getTypeList().then((res) => {
      this.tableOptions.cols[2].sourceData = res.content.map((el) => {
        return {
          label: el.name,
          value: el.code,
        };
      });
    });
  },
  methods: {
    handleTableBtn(name, row, index) {
      if (this[name]) {
        this[name](row, index);
      }
    },
    handleEdit(row, index) {
      console.log(row);
    },
    handleDel() {
      console.log(this.$refs.baseTable);
    },
  },
};
</script>



<style lang="scss" scoped>
.app-container{
  padding-top: 40px;
}
</style>